<template>
	<view class="box">
		<tito class="tito" title="积分明细" lefticon="left" @clickLeft="clickLeft" />
		<view class="image-pickerDate">
			<view class="image">
				<image src="../static/zhuangshi.png" mode=""></image>
			</view>
			<view class="pickerDate">
				<picker mode="date" fields="month" :value="date" :start="startDate" :end="endDate"
					@change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
				<uni-icons type="down" size="20" color="#2590FA"></uni-icons>
			</view>
		</view>
		<view class="whole">
			<uni-segmented-control :current="Number(current)" :values="items" @clickItem="onClickItem" styleType="text"
				activeColor="#2590FA"></uni-segmented-control>
		</view>
		<view class="contenList" v-if="integralRecordData.length > 0">
			<view class="conten" v-for="(item,index) in integralRecordData" :key="index">
				<view class="text-jf-number">
					<view class="jf">
						{{integralTypes[item.integralType] }}
					</view>
					<view :class="item.type == 1 ? 'number' : 'duihuan'">
						{{item.type == 1 ? '+' : '-'}}{{item.integral}}
					</view>
				</view>
				<view class="text-time">
					<view class="text">
						{{integralTypes[item.integralType] }}
					</view>
					<view class="time">
						{{item.createTime}}
					</view>
				</view>
			</view>
		</view>
		<view v-else class="nodata">
			<view class="contents">
				<image src="../../../static/image/zanwusheibei.png"></image>
				<view class="text"> 暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				items: ['全部', '增加', '减少'],
				current: "0",
				integralRecordData: [], //积分明细列表
				page: 1,
				limit: 10,
				integralTypes: {
					1: '签到',
					2: '指定日期签到',
					3: '连续签到',
					4: '积分兑换余额',
					5: '商城购买',
					6: '套餐充值',
					7: '邀请好友注册',
					8: '好友首单奖励'
				},
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.integralRecordList()
		},
		onReachBottom() {
			this.page++
			this.integralRecordList()
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			//积分明细列表
			async integralRecordList() {
				let data = {
					yearMonth: this.date,
					page: this.page,
					limit: this.limit,
					type: this.current == 0 ? '' : this.current
				}
				let res = await this.$request.get("/water-platform-app-api/customer/integralRecord/list", data)
				if (res.data) {
					this.integralRecordData.push(...res.data)
				}
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
					this.page = 1
					this.integralRecordData = []
					this.integralRecordList()
				}
			},
			bindDateChange(e) {
				this.date = e.detail.value
				this.page = 1
				this.integralRecordData = []
				this.integralRecordList()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 6;
				}
				month = month > 9 ? month : '0' + month;
				return `${year}-${month}`;
			},
		}
	}
</script>

<style lang="scss">
	.nodata {
		display: grid;
		place-content: center;
		margin-top: 500rpx;
	
		.contents {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
	
			image {
				width: 150px;
				height: 114px;
			}
	
			.text {
				font-size: 20rpx;
			}
		}
	
	}
	.box {
		min-height: 100vh;
		// background-color: #F3F5F6;
	}

	.image-pickerDate {
		margin-top: 32rpx;
		position: relative;

		.image {
			text-align: center;

			image {
				width: 592rpx;
				height: 16rpx;
			}
		}

		.pickerDate {
			margin: -48rpx auto;
			width: 228rpx;
			height: 56rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #2590FA;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 8rpx 24rpx;
			box-sizing: border-box;

			.uni-input {
				font-size: 28rpx;
				color: #2590FA;
			}
		}
	}

	.whole {
		margin-top: 80rpx;
	}

	.contenList {
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 48rpx;

		.conten {
			height: 114rpx;

			.text-jf-number {
				display: flex;
				justify-content: space-between;

				.jf {
					font-weight: 600;
					font-size: 28rpx;
					color: #2E3033;
				}

				.number {
					font-weight: 600;
					font-size: 28rpx;
					color: #FA6B05;
				}

				.duihuan {
					color: #2590FA;
				}
			}

			.text-time {
				display: flex;
				margin-top: 16rpx;

				.text {
					font-size: 24rpx;
					color: #B1B2B2;
				}

				.time {
					font-size: 24rpx;
					color: #B1B2B2;
					margin-left: 24rpx;
				}
			}
		}
	}
</style>